<template>
  <div>
    <h3>{{ $t("classification.title") }}</h3>
    <div class="main">
      <!-- 类别标签 -->
      <el-card shadow="always" :key="item.id" v-for="item in dynamicTags">
        <div slot="header" class="card-header">{{ item.title }}</div>
        <el-tag
          :key="indexs"
          v-for="(items, indexs) in item.category"
          closable
          :type="items.color"
          :disable-transitions="false"
          @close="handleClose(item, items)"
        >
          {{ items.name }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="item.inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm(item)"
          @blur="handleInputConfirm(item)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(item)"
          >+ New Tag</el-button
        >
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tagType: ["", "success", "danger", "warning"],
      dynamicTags: [
        {
          id: 1,
          title: "scrapyd",
          inputVisible: false,
          //   category: [{ id: 1, name: "news", type: 1, color: "danger" }],
          category: [],
        },
        {
          id: 2,
          title: "python",
          inputVisible: false,
          category: [],
        },
        {
          id: 3,
          title: "other",
          inputVisible: false,
          category: [],
        },
      ],
      inputVisible: false,
      inputValue: "",
    };
  },
  created() {
    this.getTags();
  },
  methods: {
    // 获取标签类别
    async getTags() {
      const { data: res } = await this.$http.get("/reptile/category_list");
      console.log("---先看看全部爬虫分类---", res.data);
      // 将每个tag的颜色添加进数据中
      res.data.forEach((val) => {
        val.color =
          this.tagType[Math.floor(Math.random() * this.tagType.length)];
      });
      // 整理数据
      this.dynamicTags.forEach((val) => {
        val.category = res.data.filter((vals) => {
          return vals.type == val.id;
        });
      });
      console.log("---看看整理后的数据---", this.dynamicTags);
    },
    // 删除标签
    handleClose(item, items) {
      this.$http
        .get("/reptile/category_del", {
          params: { id: items.id },
        })
        .then((res) => {
          if (res.data.code == 0) {
            item.category.splice(item.category.indexOf(items), 1);
          }
        });
    },
    // 点击添加tag标签按钮
    showInput(item) {
      item.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput[0].$refs.input.focus();
      });
    },
    // 输入框按下回车或者失去焦点时，保存添加的tag
    handleInputConfirm(item) {
      let inputValue = this.inputValue;
      if (inputValue) {
        // item.category.push({
        //   type: this.tagType[Math.floor(Math.random() * this.tagType.length)],
        //   label: inputValue,
        // });
        this.$http.post("/reptile/category_create", {
          name: inputValue,
          type: item.id,
        });
        this.getTags();
      }
      item.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.main {
  margin-top: 20px;
  .el-card {
    width: 70%;
    .card-header {
      color: #606266;
      font-weight: 700;
    }
    .el-tag + .el-tag {
      margin-left: 10px;
      margin-bottom: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>